{extend name="common/common" /}

{block name="style"}
<style media="screen">
p{
	margin:0;
}
#background{
	position:fixed;z-index:-1;
}
#grid{
	display:none;
}
.el-card-content{
	min-height:300px;
}
body{
	overflow-x:hidden;
}
main[role="main-home-wrapper"], main[role="main-inner-wrapper"]{
	padding-bottom:0;
}
.el-card.box-card.is-always-shadow{
	margin-bottom:30px
}
.color_rgb {
	float:left;
}
.color_hex {
	float:right;
}
.color_text{
	font-size:18px;
}
.el-textarea {
	width:300px;
}
#outputQRcode {
	width:128px;height:128px;
	margin:0 auto;
}
</style>
{/block}

{block name="content"}
<canvas id="background"></canvas>
<ul id="grid">
	<li><img src="__IMG__/home-images/image-4.jpg"/></li>
</ul>
<main role="main-home-wrapper" class="container" id="main">
	<el-row :gutter="30">
		<el-col :md="12">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span class="span-primary"><i class="el-icon-time"></i></span>
					时间戳转换
				</div>
				<div class="el-card-content">
					<el-form :inline="true">
						<p>时间戳转日期:</p>
						<el-form-item>
							<el-input v-model="card1.time_to_date" controls-position="right"
								maxlength="11" placeholder="请输入时间戳">
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="mini"
								@click="timeToDate" icon="el-icon-refresh" plain>
							</el-button>
						</el-form-item>
						<el-form-item>
							<el-date-picker
								v-model="card1.time_to_date_show" readonly value-format="timestamp"
								type="datetime">
							</el-date-picker>
						</el-form-item>
						<hr>
						<p>日期转时间戳:</p>
						<el-form-item>
							<el-date-picker
								v-model="card1.date_to_time" value-format="timestamp"
								type="datetime">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="mini"
								@click="dateToTime" icon="el-icon-refresh" plain>
							</el-button>
						</el-form-item>
						<el-form-item>
							<el-input v-model="card1.date_to_time_show" controls-position="right"
								suffix-icon="false">
							</el-input>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
		</el-col>
		<el-col :md="12">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span class="span-primary"><i class="fa fa-picture-o"></i></span>
					color picker
				</div>
				<div class="el-card-content">
					<el-row>
						<el-color-picker v-model="card2.color" show-alpha class="color_rgb"></el-color-picker>
						<el-color-picker v-model="card2.color" class="color_hex"></el-color-picker>
					</el-row>
					<hr>
					<p class="text-center color_text">{{card2.color}}</p>
				</div>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="30">
		<el-col :md="12">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span class="span-primary"><i class="fa fa-qrcode"></i></span>
					二维码生成
				</div>
				<div class="el-card-content">
					<el-form :inline="true">
						<el-form-item>
							<el-input type="textarea" v-model="card3.QRcode_text"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary"
								@click="mkQRcode" plain>生成
							</el-button>
						</el-form-item>
					</el-form>
					<hr>
					<div id="outputQRcode"></div>
				</div>
			</el-card>
		</el-col>
		<el-col :md="12">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span class="span-primary"><i class="el-icon-edit-outline"></i></span>
					WebIDE
				</div>
				<div class="el-card-content">
					<p class="text-center">WebIDE是一款在线编辑工具</p>
					<p class="text-center">必须登录后才能使用</p>
					<p class="text-center">能够操作您的文件夹下文件夹以及可编辑的文件</p>
					<hr>
					<p class="text-center">
						<a href="{:url('webide/ideol')}"><el-button>进入WebIDE</el-button></a>
					</p>
				</div>
			</el-card>
		</el-col>
	</el-row>
</main>
{/block}

{block name="script"}
<script src="__RESOURCE__/js/jquery.qrcode.min.js"></script>
<script src="__JS__/bg.js"></script>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		card1:{
			time_to_date:"",time_to_date_show:"",
			date_to_time:"",date_to_time_show:""
		},
		card2:{
			color:"#409EFF"
		},
		card3:{
			QRcode_text:""
		}
	},
	methods:{
		timeToDate() {
			this.card1.time_to_date_show = this.card1.time_to_date + '000';
		},
		dateToTime() {
			this.card1.date_to_time_show = this.card1.date_to_time / 1000;
		},
		rgbToHex() {
			this.card2.color_hex = this.card2.color_rgb;
		},
		mkQRcode() {
			var text = this.utf16to8(this.card3.QRcode_text);
			if(text != ""){
				$('#outputQRcode').html("");
				$('#outputQRcode').qrcode({
					width:128,height:128,correctLevel:0,text:text
				});
			}
		},
		utf16to8(str) {
			var out, i, len, c;
		    out = "";
		    len = str.length;
		    for(i = 0; i < len; i++) {
		    c = str.charCodeAt(i);
		    if ((c >= 0x0001) && (c <= 0x007F)) {
		 	   out += str.charAt(i);
		    } else if (c > 0x07FF) {
		 	   out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
		 	   out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
		 	   out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
		    } else {
		 	   out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
		 	   out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
		    }
		    }
		    return out;
		}
	}
});
</script>
{/block}
